<template>
  <div>
    <div class="left">
      <div class="title">
        <span class="word">管理员信息</span>
      </div>
      <div class="line"></div>
      <div class="middle">
        <div class="mtop">
          <div>基础信息</div>
          <el-button @click="dialogFormVisible = true">修改</el-button>
        </div>
        <div class="admin">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple" />
              <span>姓名:薛某某</span>
            </el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple" />
              <span>邮箱:123456789@163.com</span>
            </el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple" />
              <span>手机:12345678232</span>
            </el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple" />
              <span>密码:***********</span>
            </el-col>
          </el-row>
        </div>
        <div class="line2"></div>
        <div class="bottom">
          <div class="Btop">
            <div>管理的其他项目</div>
            <el-button @click="add = true">添加</el-button>
          </div>
          <div class="table">
            <el-table :data="tableData" >
              <el-table-column prop="name" label="项目名称" align="center"/>
              <el-table-column prop="address" label="城市" align="center"/>
              <el-table-column prop="func" label="功能" align="center"/>
              <el-table-column prop="createTime" label="线上时间" align="center"/>

              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button
                    size="small"
                    class="smbtn"
                    @click="handleDelete(scope.$index, scope.row)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="page">
              <div class="example-pagination-block">
                <el-pagination layout="prev, pager, next" :total="100" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改弹出框 -->
  <div class="dialog userDialog">
    <el-dialog v-model="dialogFormVisible" title="基础信息">
      <div class="line3"></div>
      <div class="userimg">
        <img src="" alt="" srcset="" />
      </div>
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <div v-if="cpwd == true">
          <el-form-item label="原密码" :label-width="formLabelWidth">
            <el-input v-model="form.oldPwd" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input v-model="form.newPwd1" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input v-model="form.newPwd2" autocomplete="off" />
          </el-form-item>
        </div>
        <div v-if="cpwd == false">
          <el-form-item label="密码" :label-width="formLabelWidth">
            <span>*********</span>
            <div>
              <el-button type="text" class="chpwd" @click="changePwd"
                >更改密码</el-button
              >
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div class="line"></div>

      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="(dialogFormVisible = false), (cpwd = false)"
            class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="(dialogFormVisible = false), (cpwd = false)"
            class="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 新增弹出框 -->
  <div class="dialogs userDialog">
    <el-dialog v-model="add" title="新建项目">
      <div class="line4"></div>

      <el-form :model="addform">
        <el-form-item label="项目名称" :label-width="formLabelWidth1">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入项目名称"/>
        </el-form-item>
        <el-form-item label="城市/省份" :label-width="formLabelWidth1">
          <el-select
            v-model="value"
            class="m-2"
            placeholder="请选择城市/省份"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="功能" :label-width="formLabelWidth1">
          <el-select
            v-model="value"
            class="m-2"
            placeholder="请选择项目的功能"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业主名称" :label-width="formLabelWidth1">
          <el-input v-model="form.owner" autocomplete="off" placeholder="请输入业主名称"/>
        </el-form-item>
        <el-form-item label="总点数" :label-width="formLabelWidth1">
          <el-input v-model="form.allCount" autocomplete="off" placeholder="请输入总点数"/>
        </el-form-item>
        <el-form-item label="上线时间" :label-width="formLabelWidth1">
          <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="年/月/日-:-"
        format="YYYY/MM/DD hh:mm:ss"
      />
        </el-form-item>
      </el-form>
      <div class="line"></div>

      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="(dialogFormVisible = false), (cpwd = false)"
            class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="(dialogFormVisible = false), (cpwd = false)"
            class="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const formLabelWidth = ref(75);
const formLabelWidth1 = ref(100);
const value1 = ref('')
const cpwd = ref(false);
const add = ref(false);
const dialogFormVisible = ref(false);
const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const form = reactive({
  name: "",
  email: "",
  phone: "",
  pwd: "",
  oldPwd: "",
  newPwd1: "",
  newPwd2: "",
});
const addform = reactive({
  projectName: "",
  city: "",
  fun: "",
  owner: "",
  allCount: "",
  onlineTime: "",
});
const tableData = reactive([
  {
    date: "2016-05-03",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-02",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-04",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-01",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-03",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-02",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-04",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-01",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-01",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
  {
    date: "2016-05-01",
    name: "某某某某项目",
    address: "昆山、江苏",
    func: "酒店",
    createTime: "2022年1月",
  },
]);
function changePwd() {
  cpwd.value = true;
}
</script>

<style scoped lang="less">
.smbtn{
  width: 80px;
  height: 30px;
}
.userDialog {
  :deep(.el-dialog__title) {
    color: rgb(81, 99, 167);
    font-size: 19px;
  }
  :deep(.el-dialog__close) {
    font-size: 27px !important;
    color: rgb(81, 99, 167);
  }
  :deep(.el-dialog__body) {
    padding: 20px 0 20px;
  }
}
.left {
  background-color: white;

  border-style: none;
  border-color: unset;
  box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  .title {
    padding: 20px;
    .word {
      font-family: SourceHanSansSC;
      font-weight: 550;
      font-size: 20px;
      color: rgb(77, 98, 165);
      font-style: normal;
      letter-spacing: 2px;
      line-height: 28px;
      text-decoration: none;
    }
  }
  .line {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }
  .middle {
    padding: 20px;
    width: 100%;
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 16px;
    color: rgb(127, 127, 127);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 22px;
    text-decoration: none;
    .mtop {
      display: flex;
      justify-content: space-between;
      .el-button {
        width: 104px;
        height: 30px;
        z-index: 698;
        background-color: rgb(147, 170, 222);
        color: white;
      }
    }

    .line2 {
      width: 100%;
      padding-left: 40px;
      padding-right: 40px;
      border-bottom: dashed rgb(220, 224, 238) 1px;
      height: 1px;
      margin: auto;
      margin: 30px 0px 30px 0px;
    }
  }

  .bottom {
    .Btop {
      display: flex;
      justify-content: space-between;
      padding: 10px 0px 10px 0px;
      .el-button {
        width: 104px;
        height: 30px;
        z-index: 698;
        background-color: rgb(147, 170, 222);
        color: white;
      }
    }
    .table {
      .el-button {
        width: 80px;
        height: 30px;
        background-color: rgb(143, 170, 220);
        border-style: none;
        border-color: unset;
        border-radius: 4px;
        font-size: 14px;
        padding: 0px;
        text-align: center;
        line-height: 20px;
        font-weight: normal;
        font-style: normal;
      }
    }
    .page {
      display: flex;
      justify-content: flex-end;
    }
  }
}

.dialog {
  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 20px;
  }
  /deep/.el-input__inner {
    -webkit-appearance: none;
    background-color: var(--el-input-bg-color, var(--el-color-white));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    border: var(--el-input-border, var(--el-border-base));
    box-sizing: border-box;
    color: var(--el-input-text-color, var(--el-text-color-regular));
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 32px;
    outline: 0;
    padding: 0 11px;
    transition: var(--el-transition-border);
    width: 200px;
  }
  .userimg {
    padding-top: 30px;
    margin: auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background-color: thistle;
  }
  /deep/ .el-form-item__label {
    font-family: SourceHanSansSC;
    font-weight: 400;
    font-size: 14px;
    color: rgb(127, 127, 127);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 20px;
    text-decoration: none;
    padding-right: 30px;
  }
}
.dialogs {
  /deep/.el-dialog {
    --el-dialog-width: 410px;
    --el-dialog-margin-top: 15vh;
    --el-dialog-bg-color: var(--el-color-white);
    --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --el-dialog-title-font-size: var(--el-font-size-large);
    --el-dialog-content-font-size: 14px;
    --el-dialog-font-line-height: var(--el-font-line-height-primary);
    --el-dialog-padding-primary: 20px;
    position: relative;
    margin: var(--el-dialog-margin-top, 15vh) auto 50px;
    background: var(--el-dialog-bg-color);
    border-radius: 8px;
    box-shadow: var(--el-dialog-box-shadow);
    box-sizing: border-box;
    width: var(--el-dialog-width, 410px);
  }
  /deep/.line4 {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }
  /deep/.el-input {
    width: 200px;
  }

  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 40px;
  }
  /deep/.el-input__inner {
    left: 870px;
    top: 428px;
    height: 30px;
    border-radius: 4px;
    color: rgba(204, 204, 204, 100);
    font-size: 14px;
    text-align: left;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(204, 204, 204, 100);
    line-height: 32px;
    outline: 0;
    padding: 0 11px;
    transition: var(--el-transition-border);
    width: 250px;
  }
  .userimg {
    padding-top: 30px;
    margin: auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background-color: thistle;
  }
  /deep/ .el-form-item__label {
    left: 790px;
    top: 433px;
    width: 57px;
    height: 20px;
    color: rgba(127, 127, 127, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }
}
.chpwd {
  margin-left: 50px;
  left: 1037px;
  top: 633px;
  width: 56px;
  height: 20px;
  color: rgba(77, 98, 165, 100);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
.line3 {
  border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  margin-bottom: 30px;
}
.cancel {
  left: 917px;
  top: 696px;
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(204, 204, 204, 100);
  text-align: center;
  border: none;
}
.save {
  left: 1013px;
  top: 696px;
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(143, 170, 220, 100);
  text-align: center;
  border: none;
}
</style>
<style scoped  lang="less">
/deep/.el-dialog {
  --el-dialog-width: 346px;
  --el-dialog-margin-top: 15vh;
  --el-dialog-bg-color: var(--el-color-white);
  --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --el-dialog-title-font-size: var(--el-font-size-large);
  --el-dialog-content-font-size: 14px;
  --el-dialog-font-line-height: var(--el-font-line-height-primary);
  --el-dialog-padding-primary: 20px;
  position: relative;
  margin: var(--el-dialog-margin-top, 15vh) auto 50px;
  background: var(--el-dialog-bg-color);
  border-radius: var(--el-border-radius-small);
  box-shadow: var(--el-dialog-box-shadow);
  box-sizing: border-box;
  width: var(--el-dialog-width, 346px);
}
/deep/.el-table tr {
  background-color: rgb(246, 250, 255);
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: white 4px solid !important;
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
  /deep/.el-button>span {
    color: white;
    display: inline-flex;
    align-items: center;
}
</style>
